<template>
  <div class="wzd">
    <!-- <el-card class="box-card" shadow="hover">
      <GrailLayout />
    </el-card>
    <el-card class="box-card" shadow="hover">
      <BfcFloat />
    </el-card> -->
    <div class="box">
      <div>圣杯布局</div>
      <codeView :code="grailLayOutString" height="auto" />
    </div>
    <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>

     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
     <div class="box">
      <div>BFC</div>
      <codeView :code="BFCstring" height="auto" />
    </div>
    
  </div>
</template>

<script>
import BfcFloat from "@/views/daily/cssview/BFC_FLOAT";
import GrailLayout from "./GrailLayout.vue";
import codeView from "@/components/Prism";
import { grailLayOutString, BFCstring } from "./js/codeview";
export default {
  components: {
    codeView,
    BfcFloat,
    GrailLayout,
  },
  data() {
    return {
      grailLayOutString,
      BFCstring,
    };
  },
};
</script>

<style lang="less" scoped>
.wzd {
  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  // column-gap: 10px;
  .box {
    float: left;
    margin-left: 10px;
    > div:first-child {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>